<template>
    <div class="simditor">
      <textarea :id="id"></textarea>
    </div>
</template>
<script>
import $ from 'jquery';
import Simditor from 'simditor';
import 'simditor/styles/simditor.css';
export default {
  data () {
    return {
      editor: '',
    };
  },
  props: {
    id: '',
    options: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  mounted () {
    let vm = this;
    this.editor = new Simditor(Object.assign({}, {
      textarea: $(`#${vm.id}`),
    }, this.options));
    this.editor.on('valuechanged', (e, src) => {
      this.valueChange(e, src);
    });
  },
  methods: {
    valueChange (e, val) {
      this.$emit('change', this.editor.getValue());
    },
    valueSet (val) {
      this.editor.setValue(val);
    },
  },
};
</script>
<style scoped>
</style>
